<template>
  <div class="w-full h-full overflow-x-hidden">
    <router-view v-slot="{ Component, route }">
      <!-- tailwind配合vue内置transition组件实现页面切换动画 -->
      <transition
        mode="out-in"
        appear
        enter-active-class="transition duration-700 ease-in-out"
        leave-active-class="transition duration-700 ease-in-out"
        enter-from-class="opacity-50 translate-x-[2%]"
        leave-to-class="opacity-100"
      >
        <component :is="Component" :key="route.path" />
      </transition>
    </router-view>
  </div>
</template>

<script setup lang="ts"></script>

<style scoped></style>
